<template>
  <div>
    <el-dialog
      :title="titleInfo.text"
      :visible.sync="dialogFormVisible"
      width="700px"
    >
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <!-- 礼拜制 -->
        <el-tab-pane
          v-if="addNewWorkModeWorshipFlag"
          label="礼拜制"
          name="first"
        >
          <!-- 表单区域 -->
          <el-form
            :key="1"
            ref="worshipSystem"
            label-width="130px"
            :model="worshipSystemForm"
            :rules="ruleInworshipSystem"
          >
            <el-form-item
              label="工作模式名称:"
              prop="name"
            >
              <el-input
                v-model="worshipSystemForm.name"
                placeholder="请填写工作模式名称"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="连续工作天数:"
              class="work-time"
              :required="true"
            >
              <el-checkbox-group v-model="worshipSystemForm.checkList">
                <el-checkbox
                  label="monday"
                >周一</el-checkbox>
                <el-checkbox label="tuesday">周二</el-checkbox>
                <el-checkbox label="wednesday">周三</el-checkbox>
                <el-checkbox label="thursday">周四</el-checkbox>
                <el-checkbox label="friday">周五</el-checkbox>
                <el-checkbox label="saturday">周六</el-checkbox>
                <el-checkbox label="sunday">周日</el-checkbox>
              </el-checkbox-group>
              <span class="remark">选中为工作时间，未选中为休息时间</span>
            </el-form-item>
            <el-form-item
              label="工作时间:"
              :required="true"
            >
              <el-time-picker
                v-model="worshipSystemForm.workTime"
                is-range
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                format="HH:mm"
                value-format="HH:mm"
              >
              </el-time-picker>
            </el-form-item>
          </el-form>
          <!-- 礼拜制操作区域 -->
          <div
            class="footer-btn"
          >
            <el-button
              class="save-btn"
              @click="confirmFn"
            >确认</el-button>
            <el-button
              class="cancel-btn"
              @click="dialogFormH"
            >取消</el-button>
          </div>
        </el-tab-pane>
        <!-- 连续制 -->
        <el-tab-pane
          v-if="addNewWorkModeContinuousFlag"
          label="连续制"
          name="second"
        >
          <!-- 表单区域 -->
          <el-form
            :key="2"
            ref="continuousSystem"
            label-width="130px"
            :model="continuousSystemForm"
            :rules="ruleIncontinuousSystem"
          >
            <el-form-item
              label="工作模式名称:"
              prop="name"
            >
              <el-input
                v-model="continuousSystemForm.name"
                placeholder="请填写工作模式名称"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="连续工作天数:"
              prop="work"
            >
              <span>上</span>
              <el-input

                v-model="continuousSystemForm.work"
                style="width: 110px; margin-right: 21px; margin-left: 10px;"
                placeholder="请输入"
              >
                <span
                  slot="suffix"
                  style="
                color: #20232a;
                font-weight: 400;
                font-size: 14px;
                font-family: PingFangSC, PingFangSC-Regular;
                margin-right: 14px;
              "
                >天</span>
              </el-input>
              <span>休</span>
              <el-input

                v-model="continuousSystemForm.rest"
                style="width: 110px; margin-right: 21px; margin-left: 10px;"
                placeholder="请输入"
              >
                <span
                  slot="suffix"
                  style="
                color: #20232a;
                font-weight: 400;
                font-size: 14px;
                font-family: PingFangSC, PingFangSC-Regular;
                margin-right: 14px;
              "
                >天</span>
              </el-input>
            </el-form-item>
            <el-form-item
              label="工作时间:"
              :required="true"
            >
              <el-time-picker
                v-model="continuousSystemForm.workTime"
                is-range
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                format="HH:mm"
                value-format="HH:mm"
              >
              </el-time-picker>
            </el-form-item>
          </el-form>
          <!-- 连续制操作区域 -->
          <div
            class="footer-btn"
          >
            <el-button
              class="save-btn"
              @click="confirmFn2"
            >确认</el-button>
            <el-button
              class="cancel-btn"
              @click="dialogFormH"
            >取消</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import { addWorkHistory, updateWorkHistory } from '@/api/transit'
export default {
  name: 'NewWorkingModeAdd',
  props: {
    titleInfo: {
      type: Object,
      required: true
    },
    worshipSystemForm: {
      type: Object,
      required: true
    },
    continuousSystemForm: {
      type: Object,
      required: true
    },
    addNewWorkModeWorshipFlag: {
      type: Boolean,
      required: true
    },
    addNewWorkModeContinuousFlag: {
      type: Boolean,
      required: true
    },
    activeNameSon: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      dialogFormVisible: false,
      //   activeName: this.activeNameSon,
      flag: true, // 防止重复点击生成一下生成很多条相同的数据
      //   activeName: 'first',
      //   礼拜制
      //   worshipSystemForm: {
      //     name: '',
      //     //   多选
      //     checkList: [],
      //     workTime: ['09:00', '18:00']
      //   },
      //   //   连续制
      //   continuousSystemForm: {
      //     name: '',
      //     work: '',
      //     rest: '',
      //     workTime: ['09:00', '18:00']
      //   },
      //   礼拜制校验规则
      ruleInworshipSystem: {
        name: [
          {
            required: true,
            message: '工作模式名称不能为空',
            trigger: 'blur'
          }
        ]
      },
      //   连续制校验规则
      ruleIncontinuousSystem: {
        name: [
          {
            required: true,
            message: '工作模式名称不能为空',
            trigger: 'blur'
          }
        ],
        work: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.continuousSystemForm.work === '' || this.continuousSystemForm.rest === '') {
                callback(new Error('请填写连续工作天数'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      },
      //   星期天列表
      weekList: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'],
      workTimeList: []
    }
  },
  computed: {
    activeName: {
      get() {
        return this.activeNameSon
      },
      set(val) {
        this.$emit('changeTab', val)
        // this.activeNameSon = val
      }
    }
  },
  methods: {
    // tab切换
    handleClick(tab, event) {
    //   if (tab.name === 'scond') {
    //     this.$emit('changeTab', 'second')
    //   }
    //   console.log(tab.name)
    //   console.log(event)
    },
    // 弹层显示
    dialogFormV() {
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    dialogFormH() {
      this.dialogFormVisible = false
    },
    // 时间转换
    getTime(arr) {
      this.workTimeList = []
      arr.forEach(item => {
        const hourRes = Number(item.slice(0, 2))
        const minuteRes = Number(item.slice(3, 5))

        this.workTimeList.push(hourRes * 60 + minuteRes)
      })
    },
    // 新增工作模式-礼拜制
    confirmFn() {
      if (!this.flag) {
        return
      }
      this.flag = false
      // 等待校验规则是否合规
      this.$refs['worshipSystem'].validate(async (valid) => {
        if (valid) {
        //   console.log('校验通过')
          const data = {
            name: this.worshipSystemForm.name,
            workPatternType: '1'
          }
          this.weekList.forEach(item => {
            if (this.worshipSystemForm.checkList.includes(item)) {
              data[item] = '1'
            } else {
              data[item] = '2'
            }
          })
          this.getTime(this.worshipSystemForm.workTime)
          //   console.log('工作时间', this.workTimeList)
          data.workStartMinute1 = this.workTimeList[0]
          data.workEndMinute1 = this.workTimeList[1]

          if (this.worshipSystemForm.id) {
            data.id = this.worshipSystemForm.id
            // 编辑
            await updateWorkHistory(data).then((res) => {
              if (res.code === 200) {
                this.$message.success('修改工作模式成功！')
              } else {
                this.$message.error(res.msg || '修改工作模式失败！')
              }
            }).catch((err) => {
              this.$message.error(err.msg || '修改工作模式失败！')
            })
          } else {
            // 新增
            await addWorkHistory(data).then((res) => {
              if (res.code === 200) {
                this.$message.success('新增工作模式成功！')
              } else {
                this.$message.error(res.msg || '新增工作模式失败！')
              }
            }).catch((err) => {
              this.$message.error(err.msg || '新增工作模式失败！')
            })
          }

          // 通知父组件
          this.$emit('newDataes')
          // 关闭弹窗
          this.dialogFormH()

          this.flag = true
        } else {
          this.flag = true
          this.$message.error('* 为必填项')
        }
      })
    },
    // 新增工作模式-连续制
    confirmFn2() {
      if (!this.flag) {
        return
      }
      this.flag = false
      // 等待校验规则是否合规
      this.$refs['continuousSystem'].validate(async (valid) => {
        if (valid) {
        //   console.log('校验通过')
          const data = {
            name: this.continuousSystemForm.name,
            workPatternType: '2',
            workDayNum: this.continuousSystemForm.work,
            restDayNum: this.continuousSystemForm.rest
          }
          this.getTime(this.continuousSystemForm.workTime)
          //   console.log('工作时间', this.workTimeList)
          data.workStartMinute1 = this.workTimeList[0]
          data.workEndMinute1 = this.workTimeList[1]
          console.log(data)

          if (this.continuousSystemForm.id) {
            data.id = this.continuousSystemForm.id
            // 编辑
            await updateWorkHistory(data).then(res => {
              if (res.code === 200) {
                this.$message.success('修改工作模式成功！')
              } else {
                this.$message.error(res.msg || '修改工作模式失败！')
              }
            }).catch(err => {
              this.$message.error(err.msg || '修改工作模式失败！')
            })
          } else {
            // 新增
            await addWorkHistory(data).then(res => {
              if (res.code === 200) {
                this.$message.success('新增工作模式成功！')
              } else {
                this.$message.error(res.msg || '新增工作模式失败！')
              }
            }).catch(err => {
              this.$message.error(err.msg || '新增工作模式失败！')
            })
          }

          // 通知父组件
          this.$emit('newDataes')
          // 关闭弹窗
          this.dialogFormH()
          this.flag = true
        } else {
          this.flag = true
          this.$message.error('* 为必填项')
        }
      })
    }
  }
}
</script>

<style lang='scss' scoped>
::v-deep .el-dialog__body {
  padding: 30px 60px 0 60px !important;
  .el-tabs__active-bar {
    background-color:#E15536 ;
    height: 3px;
    width: 49px;
    margin: 0 auto;
  }
  .el-tabs__item {
    font-size: 14px;
    color: #67717e;
  }
  .is-active {
    font-size: 16px;
    font-weight: bold;
    color: #20232A;
  }
  .el-form-item__label {
    font-weight: normal;
  }
  .work-time {
    .el-form-item__content {
        line-height: normal;
        .el-checkbox-group {
            margin-top: 10px;
            .el-checkbox {
                margin-right: 10px;
            }
        }
        .remark {
            display: block;
            margin-top: 10px;
            margin-bottom: 10px;
            color: #c0c6d2;
        }
    }
  }
}
::v-deep .footer-btn {
  background-color: #fff;
  height: 88px;
  line-height: 88px;
  text-align: center;
//   border-top: 1px solid #E5E7ED ;
  .save-btn{
    width: 110px;
    height: 40px;
    background-color: #e15536;
    border: 1px solid #e15536;
    color: #fff;
    }
  .save-btn:hover{
    background-color: #ffab98;
    border: 1px solid #ffab98;
  }
  .cancel-btn {
    width: 110px;
    height: 40px;
    color: #e15536;
    border: 1px solid #e15536;
    background-color: #ffeeeb;
  }
  .cancel-btn:hover {
    background-color: #e15536;
    color: #fff;
  }
 }
</style>
